<!-- Created by henian.xu on 2018/11/12. -->

<template>
    <div class="classify-bar">
        <template v-for="(item,index) in areaList">
            <ClassIfyItem
                :key="`item-${item.id}`"
                :data="item.children"
                v-model="item.model"
                @input="onItemInput($event,item,index)"/>
            <i
                class="f-icon"
                :key="`icon-${item.id}`">&#xf105;</i>
        </template>

        <slot/>
    </div>
</template>

<script>
import ClassifyMixin from './ClassifyMixin';
import ClassIfyItem from './item.vue';
export default {
    name: 'ClassifyBar',
    mixins: [ClassifyMixin],
    components: { ClassIfyItem },
    data() {
        return {
            areaList: [],
            areaPathName: '',
        };
    },
    computed: {
        model: {
            get() {
                return this.value;
            },
            set(val) {
                let value = val;
                if (val.__innerInput) {
                    value = val.id;
                    this.updateAreaPathName();
                    this.oldValue = value;
                    this.$emit('input', value);
                } else {
                    // 外部变更
                    if (this.oldValue !== value) {
                        this.init(value);
                    }
                }
            },
        },
    },
    watch: {
        value: {
            handler(val) {
                // 外部的变更
                this.model = val;
            },
            immediate: process.client,
        },
    },
    methods: {
        init(val) {
            if (!val) {
                this.updateRegion();
            } else {
                this.getLoadSelectNode({ id: val }).then(json => {
                    this.areaList = [];
                    let parentArea = { id: this.pId };
                    json.forEach(area => {
                        const selectedArea = (area => area.find(item => item.isSelect))(area);
                        this.areaList.push({
                            ...selectedArea,
                            pId: parentArea.id,
                            children: area,
                            model: selectedArea.id,
                        });
                        parentArea = selectedArea;
                    });
                    this.updateAreaPathName();
                });
            }
        },
        updateRegion(index = 0) {
            let lastArea = this.areaList[index];
            if (!lastArea) {
                lastArea = { model: this.pId };
            } else {
                index++;
            }
            this.getChildren({ pId: lastArea.model }).then(json => {
                if (!json.length) {
                    this.areaList.splice(index, this.areaList.length);
                    this.onConfirm();
                    return;
                }
                this.areaList.splice(index, 1, {
                    ...json[0],
                    pId: lastArea.model,
                    children: json,
                    model: json[0].id,
                });
                this.updateRegion(index);
            });
        },
        onItemInput($event, area, index) {
            const selectedArea = (item => item.find(item => item.id === $event))(area.children);
            Object.keys(selectedArea).forEach(key => {
                area[key] = selectedArea[key];
            });
            this.updateRegion(index);
        },
        updateAreaPathName() {
            this.areaPathName = this.areaList.reduce((prev, next) => (prev.push(next.name), prev), []).join('/');
        },
        onConfirm() {
            this.model = {
                ...this.areaList[this.areaList.length - 1],
                __innerInput: true,
            };
        },
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';
.classify-bar {
    margin: $margin 0;
    > .f-icon {
        margin: 0 $margin-small;
    }
}
</style>
